<template>
  <div class="container">
    <div class="top">
      <p>机器人详情</p>
      <el-button type="primary"
                 @click="goback"
                 class="el-icon-back">返回</el-button>
    </div>
    <p class="title">基本信息</p>

    <div class="content">
      <div class="img"></div>
      <div class="contents">
        <p>机器人名称：{{ dogDetailObj.dog_name }}</p>
        <p>机器人类型：{{ dogDetailObj.dog_type }}</p>
        <p>机器人编号：{{ dogDetailObj.dog_sn }}</p>
        <p>机器人型号：{{ dogDetailObj.dog_model }}</p>
        <div class="line">
          <div class="img img1"></div>
          <span>状态：{{ dogDetailObj.dog_status == 0 ? "离线" : "在线" }}</span>
        </div>
        <div class="line">
          <div class="img img2"></div>
          <span>信号：{{ dogDetailObj.dog_signal }}</span>
        </div>
        <div class="line">
          <div class="img img3"></div>
          <span>电量：{{ dogDetailObj.dog_elec }}%</span>
        </div>
        <div class="line">
          <div class="img img4"></div>
          <span>温度：{{ dogDetailObj.dog_temp }}℃</span>
        </div>
        <div class="line">
          <div></div>
          <span>湿度：{{ dogDetailObj.dog_humi }}℃</span>
        </div>
        <!-- dog_humi -->
      </div>
      <!-- <div class="button">
        <el-button size="medium">删除</el-button>
        <el-button type="primary"
                   size="medium">修改</el-button>
      </div> -->
    </div>

    <p class="title">任务信息</p>

    <div class="tableList">
      <el-table :data="tableData"
                border
                :highlight-current-row="true"
                :header-cell-style="{ background: '#f5f5f5' }">
        <el-table-column type="index"
                         label="序号"
                         align="center"
                         width="55">
        </el-table-column>
        <el-table-column prop="scenario_name"
                         label="场景名称"
                         align="center">
        </el-table-column>
        <el-table-column prop="scenario_no"
                         label="场景编号"
                         align="center">
        </el-table-column>
        <el-table-column prop="job_name"
                         label="任务名称"
                         align="center">
        </el-table-column>
        <el-table-column prop="job_no"
                         label="任务编号"
                         align="center">
        </el-table-column>
        <el-table-column prop="inspection_start_time"
                         label="预计计划开始时间"
                         align="center"
                         width="200">
        </el-table-column>
        <el-table-column prop="inspection_end_time"
                         label="预计完成时间"
                         align="center"
                         width="200">
        </el-table-column>
        <el-table-column prop="duration"
                         label="实际时长"
                         align="center"
                         width="200">
        </el-table-column>
        <el-table-column prop="taskStatus"
                         label="任务状态"
                         align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.job_status == 0 ? "——" : "" }}</span>
            <span>{{ scope.row.job_status == 1 ? "待执行" : "" }}</span>
            <span class="blue">{{
              scope.row.job_status == 2 ? "执行中" : ""
            }}</span>
            <span class="org">{{
              scope.row.job_status == 3 ? "暂停" : ""
            }}</span>
            <span class="red">{{
              scope.row.job_status == 4 ? "中止" : ""
            }}</span>
            <span class="green">{{
              scope.row.job_status == 5 ? "已完成" : ""
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作"
                         align="center"
                         width="350">
          <template slot-scope="props">
            <el-button type="text"
                       @click="suspend(props.row)"
                       :disabled="props.row.job_status == 2 ? false : true">暂停</el-button>
            <el-button type="text"
                       @click="next(props.row)"
                       :disabled="props.row.job_status == 3 ? false : true">继续</el-button>
            <!-- <el-button type="text"
                     @click="taskSwitching()">任务切换</el-button> -->
            <el-button type="text"
                       @click="back(props.row.job_id)"
                       disabled>一键返航</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="steps">
      <el-steps :space="200"
                :active="countNum"
                align-center>
        <el-step :title="item.point_name"
                 icon=""
                 v-for="item in countNumList"
                 :key="item"></el-step>
      </el-steps>
    </div>

    <el-row>
      <el-col :span="12">
        <p class="title">视频浏览</p>
        <div class="show">
          <div class="left">
            <p class="img"
               @click="openDown"></p>
            <span>视频预览</span>
          </div>
          <div class="right">
            <p class="img"></p>
            <span>云台控制</span>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="alarm-top">
          <div class="alarm"></div>
          <p class="title title1">异常报警</p>
        </div>
        <ul>
          <li>
            <span>机器人电量过低，请及时处理</span>
            <span>2022/12/08 15:30:56</span>
          </li>
          <li>
            <span>机器人机器人电量过低，请及时处理</span>
            <span>2022/12/08 15:30:56</span>
          </li>
          <li>
            <span>机器人电量过低，请及时处理</span>
            <span>2022/12/08 15:30:56</span>
          </li>
          <li>
            <span>机器人机器人电量过低，请及时处理</span>
            <span>2022/12/08 15:30:56</span>
          </li>
          <li>
            <span>机器人电量过低，请及时处理</span>
            <span>2022/12/08 15:30:56</span>
          </li>
          <li>
            <span>机器人电量过低，请及时处理</span>
            <span>2022/12/08 15:30:56</span>
          </li>
        </ul>
      </el-col>
    </el-row>

    <el-popover trigger="manual"
                popper-class="message-popover"
                v-model="visiblepop">
      <div class="preview-title">
        <span>视频预览</span>
        <i class="el-icon-close"
           @click="close"></i>
      </div>
      <div class="preview">
        <video-player @error="videoError"
                      v-if="showVideoFlag"
                      @play="onPlayerPlay($event)"
                      @pause="onPlayerPause($event, 'm')"
                      class="video-player vjs-custom-skin"
                      ref="videoPlayer"
                      :playsinline="true"
                      :options="playerOptions">
        </video-player>
      </div>
    </el-popover>

    <el-dialog title="任务切换"
               :visible.sync="taskDialogVisible"
               append-to-body
               custom-class="custom_dialog"
               width="60%">
      <div class="dialog_filter">
        <div class="item">
          <span class="label">任务名称：</span>
          <el-input v-model="taskDialogFilter.name"
                    placeholder="请输入"></el-input>
        </div>
        <div class="item">
          <span class="label">任务编号：</span>
          <el-input v-model="taskDialogFilter.number"
                    placeholder="请输入"></el-input>
        </div>
        <div class="item">
          <el-button type="primary"
                     icon="el-icon-search">查询</el-button>
        </div>
      </div>
      <div class="table">
        <customer-table :tableInfo="dialogTableInfo"
                        :selection="true"></customer-table>
      </div>
      <el-pagination :page-sizes="[100, 200, 300, 400]"
                     :page-size="100"
                     layout="total, prev, pager, next, jumper"
                     :total="400">
      </el-pagination>
      <span slot="footer"
            class="dialog-footer">
        <el-button type="primary"
                   @click="taskDialogVisible = false">确 定</el-button>
        <el-button @click="taskDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>

    <el-dialog title="绑定摄像头"
               :visible.sync="videotaskDialogVisible"
               append-to-body
               custom-class="custom_dialog"
               width="60%">
      <div class="dialog_filter">
        <div class="item">
          <span class="label cameraStatus">摄像头状态：</span>
          <el-select v-model="videotaskDialogFilter.state"
                     placeholder="全部"></el-select>
        </div>
        <div class="item">
          <span class="label">关键词：</span>
          <el-input v-model="videotaskDialogFilter.keyword"
                    placeholder="请输入"></el-input>
        </div>
        <div class="item">
          <el-button type="primary"
                     icon="el-icon-search">查询</el-button>
        </div>
      </div>
      <div class="table">
        <customer-table :tableInfo="videodialogTableInfo"
                        :selection="true"></customer-table>
      </div>
      <el-pagination :page-sizes="[100, 200, 300, 400]"
                     :page-size="100"
                     layout="total, prev, pager, next, jumper"
                     :total="400">
      </el-pagination>
      <span slot="footer"
            class="dialog-footer">
        <el-button type="primary"
                   @click="videotaskDialogVisible = false">确 定</el-button>
        <el-button @click="videotaskDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import customerTable from "@/pages/Robot/components/CustomerTable.vue";
import { patrolInspectionTaskApi } from "@/services/Robot";

// 引入video样式
import "video.js/dist/video-js.css";
import "vue-video-player/src/custom-theme.css";
// 引入hls.js
import "videojs-contrib-hls.js/src/videojs.hlsjs";

export default {
  name: "Robot",
  props: {
    videoURL: {
      type: String,
      default: "",
    },
    detail: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  components: {
    customerTable,
  },
  data () {
    return {
      // cameraIndexCode: 'da5c318880fe40138b385df18897dc73',
      cameraIndexCode: "fbd29d260b4a4063859819503a3e5e2c",
      visiblepop: false,
      tableInfo: {
        column: [
          {
            label: "序号",
            prop: "index",
            type: "index",
            width: "50",
          },
          {
            label: "场景名称",
            prop: "sceneName",
            width: "120",
          },
          {
            label: "场景编号",
            prop: "sceneNumber",
            width: "120",
          },
          {
            label: "任务名称",
            prop: "taskName",
            width: "160",
          },
          {
            label: "任务编号",
            prop: "taskNumber",
            width: "120",
          },
          {
            label: "机器人名称",
            prop: "robotName",
            width: "150",
          },
          {
            label: "机器人编号",
            prop: "robotNumber",
            width: "150",
          },
          {
            label: "巡检计划开始时间",
            prop: "startTime",
            width: "240",
          },
          {
            label: "预计时长",
            prop: "duration",
            width: "150",
          },
          {
            label: "任务状态",
            prop: "taskStatus",
            width: "150",
          },
          {
            label: "操作",
            prop: "action",
            type: "PatrolInspectionTaskManagement",
          },
        ],
        data: [
          {
            sceneName: "场景1",
            sceneNumber: "CJ001",
            taskName: "任务1",
            taskNumber: "RW001",
            robotName: "测试1号",
            robotNumber: "CS001",
            startTime: "2022-10-25 23:12:56",
            duration: "2小时13分03秒",
            taskStatus: "执行中",
          },
        ],
      },
      dialogTableInfo: {
        column: [
          {
            label: "序号",
            prop: "index",
            type: "index",
            width: "50",
          },
          {
            label: "场景名称",
            prop: "sceneName",
            width: "120",
          },
          {
            label: "场景编号",
            prop: "sceneNumber",
            width: "120",
          },
          {
            label: "任务名称",
            prop: "taskName",
            width: "160",
          },
          {
            label: "任务编号",
            prop: "taskNumber",
            width: "120",
          },
          {
            label: "机器人名称",
            prop: "robotName",
            width: "120",
          },
          {
            label: "机器人编号",
            prop: "robotNumber",
            width: "120",
          },
          {
            label: "巡检计划开始时间",
            prop: "startTime",
            width: "200",
          },
          {
            label: "预计时长",
            prop: "duration",
            width: "120",
          },
          {
            label: "任务状态",
            prop: "taskStatus",
            width: "120",
          },
        ],
        data: [
          {
            sceneName: "场景1",
            sceneNumber: "CJ001",
            taskName: "任务1",
            taskNumber: "RW001",
            robotName: "测试1号",
            robotNumber: "CS001",
            startTime: "2022-10-25 23:12:56",
            duration: "2小时13分03秒",
            taskStatus: "执行中",
          },
          {
            sceneName: "场景1",
            sceneNumber: "CJ001",
            taskName: "任务1",
            taskNumber: "RW001",
            robotName: "测试1号",
            robotNumber: "CS001",
            startTime: "2022-10-24 23:12:56",
            duration: "2小时13分03秒",
            taskStatus: "执行中",
          },
          {
            sceneName: "场景1",
            sceneNumber: "CJ001",
            taskName: "任务1",
            taskNumber: "RW001",
            robotName: "测试1号",
            robotNumber: "CS001",
            startTime: "2022-10-23 23:12:56",
            duration: "2小时13分03秒",
            taskStatus: "执行中",
          },
          {
            sceneName: "场景1",
            sceneNumber: "CJ001",
            taskName: "任务1",
            taskNumber: "RW001",
            robotName: "测试1号",
            robotNumber: "CS001",
            startTime: "2022-10-22 23:12:56",
            duration: "2小时13分03秒",
            taskStatus: "执行中",
          },
          {
            sceneName: "场景1",
            sceneNumber: "CJ001",
            taskName: "任务1",
            taskNumber: "RW001",
            robotName: "测试1号",
            robotNumber: "CS001",
            startTime: "2022-10-21 23:12:56",
            duration: "2小时13分03秒",
            taskStatus: "执行中",
          },
          {
            sceneName: "场景1",
            sceneNumber: "CJ001",
            taskName: "任务1",
            taskNumber: "RW001",
            robotName: "测试1号",
            robotNumber: "CS001",
            startTime: "2022-10-21 23:12:56",
            duration: "2小时13分03秒",
            taskStatus: "执行中",
          },
          {
            sceneName: "场景1",
            sceneNumber: "CJ001",
            taskName: "任务1",
            taskNumber: "RW001",
            robotName: "测试1号",
            robotNumber: "CS001",
            startTime: "2022-10-21 23:12:56",
            duration: "2小时13分03秒",
            taskStatus: "执行中",
          },
          {
            sceneName: "场景1",
            sceneNumber: "CJ001",
            taskName: "任务1",
            taskNumber: "RW001",
            robotName: "测试1号",
            robotNumber: "CS001",
            startTime: "2022-10-21 23:12:56",
            duration: "2小时13分03秒",
            taskStatus: "执行中",
          },
          {
            sceneName: "场景1",
            sceneNumber: "CJ001",
            taskName: "任务1",
            taskNumber: "RW001",
            robotName: "测试1号",
            robotNumber: "CS001",
            startTime: "2022-10-21 23:12:56",
            duration: "2小时13分03秒",
            taskStatus: "执行中",
          },
          {
            sceneName: "场景1",
            sceneNumber: "CJ001",
            taskName: "任务1",
            taskNumber: "RW001",
            robotName: "测试1号",
            robotNumber: "CS001",
            startTime: "2022-10-21 23:12:56",
            duration: "2小时13分03秒",
            taskStatus: "执行中",
          },
        ],
      },
      videodialogTableInfo: {
        column: [
          {
            label: "序号",
            prop: "index",
            type: "index",
            width: "50",
          },
          {
            label: "摄像头名称",
            prop: "cameraName",
          },
          {
            label: "摄像头编码",
            prop: "cameraCode",
          },
          {
            label: "绑定状态",
            prop: "bindingStatus",
          },
          {
            label: "备注",
            prop: "remarks",
          },
        ],
        data: [
          {
            cameraName: "摄像头1",
            cameraCode: "xxxxxxxxx",
            bindingStatus: "未绑定",
            remarks: "",
          },
          {
            cameraName: "摄像头1",
            cameraCode: "xxxxxxxxx",
            bindingStatus: "未绑定",
            remarks: "",
          },
          {
            cameraName: "摄像头1",
            cameraCode: "xxxxxxxxx",
            bindingStatus: "未绑定",
            remarks: "",
          },
          {
            cameraName: "摄像头1",
            cameraCode: "xxxxxxxxx",
            bindingStatus: "未绑定",
            remarks: "",
          },
          {
            cameraName: "摄像头1",
            cameraCode: "xxxxxxxxx",
            bindingStatus: "未绑定",
            remarks: "",
          },
          {
            cameraName: "摄像头1",
            cameraCode: "xxxxxxxxx",
            bindingStatus: "未绑定",
            remarks: "",
          },
          {
            cameraName: "摄像头1",
            cameraCode: "xxxxxxxxx",
            bindingStatus: "未绑定",
            remarks: "",
          },
          {
            cameraName: "摄像头1",
            cameraCode: "xxxxxxxxx",
            bindingStatus: "未绑定",
            remarks: "",
          },
          {
            cameraName: "摄像头1",
            cameraCode: "xxxxxxxxx",
            bindingStatus: "未绑定",
            remarks: "",
          },
          {
            cameraName: "摄像头1",
            cameraCode: "xxxxxxxxx",
            bindingStatus: "未绑定",
            remarks: "",
          },
        ],
      },
      taskDialogVisible: false,
      videotaskDialogVisible: false,
      taskDialogFilter: {
        name: "",
        number: "",
      },
      videotaskDialogFilter: {
        state: "",
        keyword: "",
      },
      tableData: [],
      recentVal: 0, //默认为老平台
      showVideoFlag: true,
      playCount: 0, //播放的次数；
      // 判断截屏按钮是否已添加
      screenButton: false,
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
        autoplay: false, // 如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: "application/x-mpegURL",
            // src: 'http://125.124.108.154:83/openUrl/6ZJlb7q/live.m3u8'
            src: "http://125.124.108.154:83/openUrl/OHAc9i0/live.m3u8",
          },
        ],

        poster: "", // 你的封面地址
        // width: document.documentElement.clientWidth,
        notSupportedMessage: "此视频暂时无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          // 全屏按钮
          fullscreenToggle: true,
        },
      },
      dogDetailObj: {},
      countNumList: [],
      countNum: 0,
      id: null,
    };
  },
  mounted () { },
  created () {
    console.log(window.location.search.split("=")[1], "id");
    let id = window.location.search.split("=")[1];
    this.id = id;
    this.handleDogDetail(id);
  },
  methods: {
    handleDogDetail (id) {
      console.log(id, "iddddd");
      const params = {
        dog_id: id,
      };
      patrolInspectionTaskApi
        .robotDetail({
          params,
        })
        .then((res) => {
          if (res.code == 0) {
            console.log(res, "res");
            this.tableData = res.data.job_list.list;
            this.cameraIndexCode = res.data.camera_sn
            if (res.data.job_data.length !== 0) {
              this.countNumList = res.data.job_data.point_obj;
              let arr = []
              res.data.job_data.point_obj.map((item) => {
                if (item.is_finish == 1) {
                  arr.push(item)
                }
              })
              this.countNum = arr.length
            }
            this.dogDetailObj = res.data;
          }
        })
        .catch((e) => {
          this.tableData = [
            {
              job_name: "1",
              job_no: "CJ001",
              scenario_no: "场景1",
              scenario_name: "任务1",
              taskNo: "Rw001",
              job_id: 1,
              inspection_start_time: "2022/12/08 15:30:56",
              inspection_end_time: "2022/12/10 15:30:56",
              duration: "1小时10分钟25秒",
              taskStatus: "执行中",
            },
          ];
        });
    },
    goback () {
      this.$router.back();
    },
    taskSwitching () {
      this.taskDialogVisible = true;
    },
    suspend (row) {
      this.$confirm("确认暂停此任务？", "暂停任务", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(row, "row");
          const params = {
            dog_sn: row.dog_sn,
            job_no: row.job_no,
            scenario_no: row.scenario_no,
            exec: 2,
          };
          patrolInspectionTaskApi
            .robotJobExec({
              data: {
                ...params,
              },
            })
            .then((res) => {
              if (res.code == 0) {
                this.$message({
                  type: "success",
                  message: "巡检任务暂停",
                });
                let id = window.location.search.split("=")[1];
                this.handleDogDetail(id);
              }
            });
        })
        .catch((e) => { });
    },
    next (row) {
      this.$confirm("确认继续此任务？", "继续任务", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(row, "row");
          const params = {
            dog_sn: row.dog_sn,
            job_no: row.job_no,
            scenario_no: row.scenario_no,
            exec: 3,
          };
          patrolInspectionTaskApi
            .robotJobExec({
              data: {
                ...params,
              },
            }).then((res) => {
              console.log(res, 'res22222');
              if (res.code == 0) {
                this.$message({
                  type: "success",
                  message: "巡检任务继续",
                });
                let id = window.location.search.split("=")[1];
                this.handleDogDetail(id);
              }
            });
        })
    },
    back (id) {
      this.$confirm("确认一键返航终止任务？", "确认一键返航", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      });
    },
    close () {
      this.visiblepop = false;
    },
    openDown () {
      this.visiblepop = !this.visiblepop;
      // this.videotaskDialogVisible = !this.videotaskDialogVisible
      this.getPreviewideoUrl();
    },
    videoError (e) {
      this.cameraIndexCode = this.cameraIndexCode;
      this.getPreviewideoUrl();
    },
    // 获取视频预览数据流
    getPreviewideoUrl () {
      this.getVideoReset();
      // 正式https://hikproxy.hibuilding.cn/proxy
      // 开发http://114.215.254.34:9091/proxy
      this.axios
        .post(
          "https://hikproxy.hibuilding.cn/proxy",
          {
            cameraIndexCode: this.cameraIndexCode,
            // cameraIndexCode: this.videoURL,
            // cameraIndexCode: 'bc6676de9a13471d931c18c65cd46a78',//测试-暂时先写死
            streamType: 0,
            protocol: "hls",
            transmode: 1,
            // expand: 'streamform=ts',
            expand: "transcode=1&videotype=h264",
            streamform: "ps",
          },
          {
            headers: {
              userId: "admin",
              "api-path": "/api/video/v1/cameras/previewURLs",
              key: "ew2124ewe1333ddd",
              "Content-Type": "application/json",
              recent: 1,
            },
          }
        )
        .then((res) => {
          this.showVideoFlag = true;
          this.playerOptions.sources[0].src = res.data.data.url;
        })
        .catch((error) => {
          // console.log(error)
        });
    },
    getVideoReset () {
      //视频重置
      let autoPlayV = this.playerOptions.autoplay;
      if (autoPlayV == true) {
        //判断当前是否为自动播放
        this.playerOptions.autoplay = true; //播放
      } else {
        this.playerOptions.autoplay = false; //暂停
      }
      this.playerOptions.sources[0] = {
        src: "",
        type: "application/x-mpegURL",
      };
    },
    onPlayerPlay (player) {
      //播放
      this.playCount++;
      this.playerOptions.autoplay = true;
      let url = this.playerOptions.sources[0].src || -1;
      if (url == -1 && this.playCount == 1) {
        // this.setTimeoutFunc();//设置延时器
        this.$message.warning(
          "当前视频暂时无法播放,请检查当前视频的配置或视频的播放源头"
        );
      }
    },
    onPlayerPause (player, typeV) {
      //暂停
      this.playCount = 0;
      this.playerOptions.autoplay = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.el-input,
.el-select,
.el-date-editor {
  width: 100%;
}

/deep/ .el-dialog__body {
  padding: 30px 20px 20px 20px;
}

.top {
  padding: 0 20px;
  height: 54px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid rgba(230, 230, 230, 0.39);
  p {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.85);
  }
  .el-icon-back {
    letter-spacing: 5px;
  }
}

.title {
  margin: 26px 0 16px 20px;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.85);
}

.title1 {
  margin-left: 12px;
}

.show {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  margin-left: 20px;
  .left,
  .right {
    text-align: center;
    margin: 10px 0 0 34px;
    .img {
      width: 100%;
      height: 100%;
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    span {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #001638;
    }
  }
  .left {
    width: 384px;
    height: 219px;
    .img {
      background-image: url("../../../assets/robot/video.png");
    }
    span {
      line-height: 39px;
    }
  }
  .right {
    width: 207px;
    height: 207px;
    margin-left: 122px;
    .img {
      background-image: url("../../../assets/robot/PTZ.png");

      box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.16);
    }
    span {
      line-height: 50px;
    }
  }
}

.alarm-top {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  .alarm {
    width: 25px;
    height: 25px;
    background-image: url("../../../assets/robot/alarm.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: 10px;
  }
}

ul {
  width: 78%;
  background: rgba(245, 245, 245, 0.39);
  padding: 10px 25px;
  li {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    height: 41px;
    border-bottom: 2px solid rgba(230, 230, 230, 0.39);
    span {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.65);
    }
  }
}

.content {
  width: 100%;
  height: 140px;
  padding: 10px 20px;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  .img {
    width: 10%;
    height: 100%;
    background-image: url("../../../assets/robot/robot1.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .contents {
    width: 50%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    line-height: 45px;
    p {
      width: 25%;
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #262626;
      padding-left: 34px;
    }
    .line {
      width: 20%;
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      padding-left: 34px;
      .img {
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-right: 5px;
      }
      .img1 {
        width: 12px;
        height: 12px;
        background-image: url("../../../assets/robot/state.png");
      }
      .img2 {
        width: 12px;
        height: 11px;
        background-image: url("../../../assets/robot/signal.png");
      }
      .img3 {
        width: 14px;
        height: 8px;
        background-image: url("../../../assets/robot/power.png");
      }
      .img4 {
        width: 5px;
        height: 12px;
        background-image: url("../../../assets/robot/temperature.png");
      }
      span {
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #262626;
      }
    }
  }
  .button {
    width: 8%;
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: space-between;
    margin-left: 68px;
  }
}

.preview-title {
  width: 100%;
  height: 50px;
  background-color: rgba(102, 102, 102, 1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
  color: #409eff;
  .el-icon-close {
    color: #7f7f7f;
    font-size: 20px;
  }
}

.preview {
  width: 861px;
  height: 483px;
}

/deep/ .el-dialog__header {
  padding: 18px;
  text-align: center;
  background-color: #1890ff;

  .el-dialog__close,
  .el-dialog__title {
    color: white;
    font-weight: bold;
    font-size: 18px;
  }
}

.dialog_filter {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .item {
    display: flex;
    align-items: center;
    width: 33%;

    .label {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.85);
      width: 100px;
      text-align: end;
    }

    .cameraStatus {
      width: 110px;
    }

    .el-input {
      flex: 1;
    }

    .el-button {
      margin-left: 50px;
    }
  }
}

.table {
  padding-top: 30px;
}

.tableList {
  padding: 0 20px;
}

/deep/ .el-dialog__footer {
  text-align: center;
  // padding: 20px 0;
  .el-button--primary {
    margin-left: 50px;
  }
}

.steps {
  margin: 30px auto 5px;
  padding: 5px 20px;
  overflow-x: auto;
}
/deep/ .el-steps {
  display: inline;
  margin: 0 10px;
}
/deep/ .el-step.is-horizontal {
  width: 108px;
}
/deep/ .el-steps {
  .el-step:last-child {
    max-width: none !important;
    width: 108px;
  }
}

.container {
  padding-bottom: 20px;
}

/deep/ .el-button {
  font-size: 14px;
}
/deep/ .el-button.is-disabled {
  color: #c0c4cc !important;
}

.blue {
  color: #409eff;
}
.org {
  color: #f59a23;
}
.red {
  color: red;
}
.green {
  color: #70b603;
}
</style>

<style lang="scss">
.message-popover {
  padding: 0 !important;
  position: fixed !important;
  top: 50% !important;
  left: 54% !important;
  transform: translate(-50%, -50%) !important;
  .popper__arrow {
    display: none !important;
  }
}
</style>